.homepage{
  .banner{
    position: relative;
    height: 500px;
    text-align: center;
    font-family: "Microsoft Yahei";
    color: #fff;
    background: #282828 top center no-repeat;
    p{
      padding-top: 87px;
      margin-top: 0;
      margin-bottom: 25px;
      font-size: 42px;
    }
    small{
      display: block;
      margin-bottom: 130px;
      font-size: 24px;
    }
    &.p0{
      background-image: url(../images/p0.jpg);
    }
    &.p1{
      background-image: url(../images/p1.jpg);
    }
    &.p2{
      background-image: url(../images/p2.jpg);
    }
    &.p3{
      background-image: url(../images/p3.jpg);
    }
    &.p4{
      background-image: url(../images/p4.jpg);
    }
    &.p5{
      background-image: url(../images/p5.jpg);
    }
  }
  .templates, .watch-video{
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 47px;
    font-family: "Microsoft Yahei";
    font-size: 20px;
    border-radius: 5px;
    span{
      display: inline-block;
      width: 30px; height: 30px;
      margin-right: 10px;
      vertical-align: middle;
      background: url(../images/icons.png) 0 -118px no-repeat;
    }
  }
  .templates{
    margin-right: 30px;
    text-decoration: none;
    color: #fff;
    background: #dc4329;
    &:hover{
      background: #E2563A;
    }
    span{
      background-position: -40px -120px;
    }
  }
  .watch-video{
    cursor: pointer;
    color: #4d4742;
    background-color: #fff;
    &:hover{
      background-color: #f3f3f3;
    }
  }
  .title{
    color: #282828;
    font-size: 23px;
    line-height: 60px;
    font-family: "Microsoft Yahei";
  }
}
.template-item{
  float: left;
  width: 220px;
  margin-right: 40px;
  margin-bottom: 60px;
  &:nth-child(4n){
    margin-right: 0;
  }
  .name,.count{
    line-height: 44px;
  }
  .name{
    font-size: 14px;
    color: #282828;
    border-bottom: 1px solid #EEEDEE;
  }
  .count{
    color: #888;
    font-size: 12px;
  }
}